<template>
    <!-- show-overflow-tooltip属性，表格列单行显示，多出隐藏，鼠标放上去tootip显示 -->
      <el-table-column
        :label="myCol.label"
        :label-class-name="myCol.isGroup"
        :prop="myCol.prop"
        :width="myCol.width"
        :max-height="myCol.height"
        show-overflow-tooltip
        align="center"
      >
        <!-- 非多级表头 -->
        <template slot-scope="scope">
          <!-- 非render列 -->
          <template v-if="!myCol.render">
            <!-- 列formatter -->
            <template v-if="myCol.formatter">
              <span v-html="myCol.formatter(scope.row, myCol)"/>
            </template>
            <!-- 普通列 -->
            <template v-else>
              {{scope.row[myCol.prop]}}
            </template>
          </template>
          <!-- render列 -->
          <template v-else>
            <MyRenderDom
              :column="myCol"
              :row="scope.row"
              :render="myCol.render"
              :index="scope.$index"
            />
          </template>
        </template>
        <!-- 多级表头 -->
        <template v-for="(its,i) in myCol.columns">
          <MyColumn
            v-if="myCol.columns"
            :key="i"
            :myCol="its"
          > </MyColumn>
          <el-table-column
            v-else
            :key="i+''"
          >
          </el-table-column>
        </template>
      </el-table-column>
    </template>
     
    <script>
    export default {
      name: 'MyColumn',
      components: {
        MyRenderDom: {//函数式组件
          functional: true,//设置为true 即表示该组件为一个函数组件
          props: {
            row: Object,
            render: Function,
            index: Number,
            column: {
              type: Object,
              default: null
            }
          },
          render: (h, ctx) => {
            const params = {
              row: ctx.props.row,
              index: ctx.props.index
            }
            if (ctx.props.column) params.column = ctx.props.column
            return ctx.props.render(h, params)
          }
        },
      },
      props: {
        myCol: {
          type: Object
        },
        mutiSelect: {
          type: Boolean,
          default: () => {
            return false
          }
        }
      },
      data () {
        return {
     
        }
      },
      created () {
      },
      methods: {
     
      }
    }
    </script>